<template>
  <div class="popular_container">
    <div class="container">
      <h2 class="home_item_title"><span>热门职业</span><b>CAREER</b></h2>
      <ul class="popular_list">
        <router-link
          tag="li"
          v-for="(item,index) in List"
          :key="index"
          class="list_item"
          :to="'/hot_detail/' + item.professionId"
        >
          <p><img :src="item.picUrl" :alt="item.professionName"/></p>
          <h2>{{item.professionName}}</h2>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<!--suppress JSAnnotator -->
<script>
  /* eslint-disable quotes */
  export default {
    name: 'HomePopular',
    props: {
      List: Array
    }
  }
</script>
<style lang="stylus" scoped>
  .popular_container {
    padding: 100px 0 140px;
    background #f9f9f9;
  }

  .popular_list {
    margin-top 40px;
    overflow hidden
    .list_item {
      width: 353px;
      height: 321px;
      float: left;
      margin-left: 30.5px;
      text-align center;
      background #fff;
      margin-bottom 62px;
      transition:all .3s;
      cursor:default;
      box-shadow: 4px 6.9px 10px 0px rgba(8, 1, 3, 0.05);
      &:hover{
        box-shadow: 4px 6.9px 15px 0px rgba(8, 1, 3, 0.3);
      }
      &:nth-child(3n+1) {
        margin-left 0
      }
      p {
        width 100%
        height 235px;
        background #efefef
        img {
          width 100%
          height 100%;
        }
      }
      h2 {
        font-size: 16px;
        color: #000000;
        opacity: 0.9;
        line-height 84px
        position relative;
        &:before {
          content '';
          position absolute;
          left 50%;
          top: 28%;
          width: 48px;
          height: 4px;
          margin-left -24px;
          background-image: linear-gradient(267deg, #219aca 0%, #1bb0b0 60%, #14c696 100%), linear-gradient(#0e4696, #0e4696);
        }
      }
    }
  }
</style>
